<template>
    <div class="comment-container">
        <h4>发表评论:</h4>
        <hr>
        <textarea placeholder="请输入你想要BB的内容(最多只能输入120字)" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large"  @click="postComment">发表评论</mt-button>
        <div class="ctm-list">
            <div class="ctm-item" v-for="(item, i) in comments" :key="item.i">
                <div class="ctm-title">
                    第{{ i + 1}}楼&nbsp;&nbsp;用户: {{item.user_name}}&nbsp;&nbsp;发表于: {{item.add_time | dateFormat('YYYY-MM-DD HH:mm:ss')}}
                </div>
                <div class="ctm-body">
                    {{item.content == 'undefined'? '该用户很懒,嘛也没说': item.content}}
                </div>
            </div>
        </div>

        <mt-button type="danger" plain size="large" @click="getMore">...加载更多</mt-button>
    </div>
</template>

<script>
import {Toast} from 'mint-ui';
export default {
    data () {
        return {
            pageindex: 1, // 默认显示第一页
            comments: [], // 所有的评论
            msg: '' // 提交评论的内容
        }
    },

    created() {
        this.getComments()
    },

    methods: {
        // 获取评论
        getComments(){
            this.$http.get('api/getcomments/'+ this.id + '?pageindex=' + this.pageindex).then(res=>{
                if (res.body.status === 0) {
                    // 加载更多时, 用老数据 拼接上 新数据
                    this.comments = this.comments.concat(res.body.message);
                } else {
                    Toast('获取评论列表失败');
                }
            })
        },

        // 加载更多
        getMore(){
            this.pageindex++;
            this.getComments();
        },

        // 提交评论
        postComment(){
            // 验证评论内容是否为空
            if (this.msg.trim() === '') {
                return Toast('评论内容不能为空');
            }

            this.$http.post('api/postcomment/' + this.id, {content:this.msg.trim()}).then(res=>{
                if (res.body.status === 0) {
                    var ctm = {
                        user_name: '匿名用户',
                        add_time: Date.now(),
                        content: this.msg.trim()
                    }
                    this.comments.unshift(ctm);
                    this.msg = '';
                } else {
                    Toast('评论失败');
                }



            })
        }
    },
    // 父组件向子组件传参
    props: ['id']
}
</script>

<style lang="less" scoped>
    .comment-container {
        margin: 10px 0;
        h4 {
            font-size: 16px;
            color: #333;
            line-height: 30px;
        }

        textarea {
            border: none;
            border: 1px solid #26a2ff;
            height: 100px;
            font-size: 14px;
            color: #999;
            margin-bottom: 0;
        }

        .ctm-list {
            margin: 5px 0;
            .ctm-item {
                .ctm-title {
                    line-height: 30px;
                    font-size: 14px;
                    color: rgb(32, 32, 32);
                    background-color: #c5cdd3;
                }
                .ctm-body {
                    text-indent: 2em;
                    font-size: 14px;
                    line-height: 50px;
                    color: #333;
                }
            }
        }
    }
</style>
